<template>
  <section>
    <div class="contractContainer">
       <div class="ruleTwo">
         <p class="titleOne"><b>第二条 租赁期限、租金及押金</b></p>
         <p class="contentOne">（一）租赁期限、租金情况如下：
           <div style="overflow:auto;">
            <table cellpadding="0" cellspacing="0"  border="1" width="375">
              <thead>
                <tr>
                  <th rowspan="2">租赁期限</th>
                  <th colspan="2">月租金（人民币）</th>
                </tr>
                <tr>
                  <th style="width:70px">小写</th>
                  <th>大写</th>
                </tr>
              </thead>
              <tbody>
                <tr> 
                  <td>
                    <span>年</span>
                    <span>月</span>
                    <span>日至</span>
                    <span>年</span>
                    <span>月</span>
                    <span>日</span>
                  </td>
                  <td>￥</td>
                  <td>
                    <span>万</span>
                    <span>千</span>
                    <span>百</span>
                    <span>拾</span>
                    <span>元</span>
                  </td>
                </tr>
             </tbody>
           </table>
           </div>
         </p>
         <p class="contentTwo">（二）租赁期限：<span class="contentOneDetail">-</span>年，自
          <span class="contentOneDetail" style="overflow:hidden">{{contractDetail.order.beginTime}}</span>至<span class="contentOneDetail" style="overflow:hidden">{{contractDetail.order.endTime}}</span>止。租赁期满，甲方继续出租该房屋的，乙方在同等条件下有优先承租权，但应在租赁期满前 30 日内与甲方协商一致并签订新的租赁合同。
         </p>
          <p class="contentThree">（三）租金：按月结算，由乙方在每月的第<span class="contentOneDetail"> 1</span>日前结清本月租金，甲方应出具收据。租赁期间，甲方不得单方上调房屋租金。</p>
        <p class="contentFour">（四）押金：<span class="contentOneDetail"> {{contractDetail.order.dMoney}}</span>元(注：目前市场惯例为2个月租金额），乙方于
          【暂无】
          日前一次性支付给甲方。租赁期满或合同解除，乙方结清相关费用（包括应由乙方承担的费用以及房屋附属物品、设施损毁赔偿金等）并按期搬出时，甲方应同时将押金无息返还给乙方。如乙方未按合同约定付清相关费用，甲方有权将押金用于抵扣相关费用，剩余部分应返还给乙方；不足以抵扣的，乙方应据实予以补足。
          </p>
       </div>
    </div>
  </section>
</template>
<script>
import { XTable } from 'vux'
export default {
  props: ['contractDetail'],
  data () {
    return {}
  },
  methods: {},
  components: {
    XTable
  }
}
</script>
<style lang="less" scoped>
table,th,td{border:1px solid black;}
 section{
    width: 100%;
    height: 100%;
    line-height:1;
  }
  .contractContainer{
    position: relative;
    width: 100%;
    height: 100%;
  }
// .contractRule{
//      margin-top:2rem;
//      text-indent: 1.25rem;
//      font-size: 0.8rem;
//      line-height: 1.4;
//    }
.ruleTwo{
  width: 100%;
   font-size:0.8rem;
   line-height: 1.4;
   margin-top:1rem;
   text-indent:1.25rem;
}
.contentOne{
  width: 100%;
  height:50%;
}
.table_Box{
 width: 18.75rem;
 height:100%;
  text-align: center;
  border: 1px solid black;
  overflow: hidden;
}
tr>td{
white-space: nowrap;
text-overflow: ellipsis;
overflow: show; 
 span{
   display: inline-block;
   padding-left: 18px;
 }
}
.contentOneDetail{
    width: 60%;
    height: 1rem;
    font-size: 0.8rem;
    display:inline-block;
    line-height: 1.4;
    text-align: center;
    overflow: show;
    border-bottom:1px solid black;
}
.contentOneNum{
    width: 20%;
    height:1.25rem;
    font-size:0.8rem;
    display:inline-block;
    line-height: 1.4;
    overflow: show;
    border-bottom:1px solid black;
}
.contentOne,.contentTwo,.contentThree,.contentFour{
   line-height: 1.4;
   margin-bottom:1;
}
.contentOneDetail{
    width:47%;
    text-align: center; 
   }
</style>

